<template>
	<view class="container">
		<view class="navBar xy_center_between">
			<view class="item" v-for="(item,index) in navBar" :class="[{'active':navIndex===index}]"
				:style="{width:100/navBar.length+'%'}" :key="index" @click="bindToView(item,index)">
				{{item}}
			</view>
		</view>
		<view class="swiper">
			<uni-swiper-dot :info="swiperInfo" :dotsStyles="dotsStyles" :current="current" field="" :mode="mode">
				<swiper class="swiper-box" @change="change" circular="true" autoplay="true">
					<swiper-item v-for="(item ,index) in swiperInfo" :key="index">
						<view class="swiper-item">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="content" v-if="info">
			<view id="kecheng">
				<view class="title" v-if="info.cate.length>0">
					机构课程
				</view>
				<view class="selectContainer" v-if="info.cate.length>0">
					<view class="item" v-for="(item,index) in info.cate" :key="index">
						<navigator :url="'../course/list?cate_id='+item.id+'&shop_id='+pid" hover-class="none">
							<image :src="item.image" mode=""></image>
							<view class="text">
								{{item.name}}
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<view id="xinxi">
				<view class="title">
					机构信息
				</view>
				<view class="infoContainer">
					<view class="cell" v-if="info.name">
						<view class="name">
							机构名称
						</view>
						<view class="intro">
							{{info.name}}
						</view>
					</view>
					<view class="cell" @click="detail(1)" v-if="info.address_detail">
						<view class="name">
							机构地址
						</view>
						<view class="intro">
							{{info.address_detail}}
						</view>
						<image class="icon" src="../../static/img/fanhui.png" mode=""></image>
					</view>
					<view class="cell" @click="detail(2)" v-if="info.content">
						<view class="name">
							机构详情
						</view>
						<view class="intro">
							{{info.short_content}}
						</view>
						<image class="icon" src="../../static/img/fanhui.png" mode=""></image>
					</view>
				</view>
			</view>
			<view id="shizi">
				<view class="shiziTitle">
					师资力量
				</view>
				<scroll-view class="teacherContainer" scroll-x="true">
					<view class="teacherContent" :style="{width:62*info.teacher_list.length+'px'}">
						<view class="teacherIntro" v-for="(item,index) in info.teacher_list" :key="index">
							<image :src="item.avatar" mode=""></image>
							<view class="name">
								{{item.nickname}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="service" v-if="info.tel">
				<text>服务电话：</text>
				{{info.tel}}
			</view>
			<view class="activities" v-if="info.activities.length>0" id="xiaoyuan">
				<navigator class="head_bar xy_center_between" hover-class="none" :url="'./campus_style?id='+pid">
					<view class="name">
						校园风采
					</view>
					<view class="icon">
						<image src="../../static/icon/back@2x.png" mode=""></image>
					</view>
				</navigator>
				<view class="main">
					<navigator class="cardContainer" v-for="(item,index) in info.activities" :key='index'
						:url="'./campus_style_detail?id='+item.id" hover-class="none">
						<view class="cardHead xy_center_between">
							<view class="cardHeadLeft xy_center">
								<image :src="info.logo" mode="" class="avatar"></image>
								<text>{{info.name}}</text>
							</view>
							<view class="time">
								{{item.createtime | fomatTime}}
							</view>
						</view>
						<view class="cardContent">
							<view class="cover">
								<image :src="item.image" mode=""></image>
							</view>
							<view class="intro">
								{{item.name}}
							</view>
						</view>
					</navigator>
					<navigator class="more" hover-class="none" :url="'./campus_style?id='+pid">
						查看更多
					</navigator>
				</view>
			</view>
			<view class="cookbook" v-if="info.cookbook.length>0" id="shipu">
				<navigator class="head_bar xy_center_between" hover-class="none" :url="'./cook_book?id='+pid">
					<view class="name">
						每日食谱
					</view>
					<view class="icon">
						<image src="../../static/icon/back@2x.png" mode=""></image>
					</view>
				</navigator>
				<view class="main">
					<view class="cardContainer" v-for="(item,index) in info.cookbook" :key='index'>
						<view class="cardHead xy_center_between">
							<view class="cardHeadLeft xy_center">
								<image :src="info.logo" mode="" class="avatar"></image>
								<text>{{info.name}}</text>
							</view>
							<view class="time">
								{{item.createtime | fomatTime}}
							</view>
						</view>
						<view class="cardContent">
							<view class="imgs y_center">
								<view class="item" v-for="(v,k) in item.images" :key="k">
									<image :src="v.url" v-if="v.type==='image'" 
									@click="preview(item.images,k)"></image>
									<video :src="v.url" controls v-else></video>
								</view>
							</view>
							<view class="intro">
								{{item.name}}
							</view>
						</view>
					</view>
					<navigator class="more" hover-class="none" :url="'./cook_book?id='+pid">
						查看更多
					</navigator>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="detailInfoContent">
				<rich-text :nodes="detailInfo"></rich-text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import fomatTime from '../../common/js/timeTool.js'
	export default {
		data() {
			return {
				token: "",
				pid: "",
				cate_id: "",
				swiperInfo: [],
				current: 0,
				mode: 'dot',
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 51,
					backgroundColor: 'rgba(255, 255, 255, 0.58)',
					border: 'rgba(255, 255, 255, 0.58)',
					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
					selectedBorder: 'rgba(255, 255, 255, 1)',
				},
				info: "",
				detailInfo: "",
				navBar: [],
				navIndex: 0,
				timer: null,
				distansArr: [],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.pid = option.id;
			this.cate_id = option.cate_id;
			uni.showLoading({
				title: "加载中...",
				mask: true
			})
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					console.log(res);
					this.token = res.data.token;
					this.getShopInfo();
				},
				fail:()=> {
					this.init();
				}
			});
		},
		onPageScroll(object) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				let kecheng, xinxi, shizi, xiaoyuan, shipu;
				if (this.info.cate.length > 0) {
					uni.createSelectorQuery().select('#kecheng').boundingClientRect(res => { //最外层盒子的节点：类或者id
						kecheng = res.top + res.height-44;
					}).exec()
				}
				if (this.info.address_detail || this.info.name || this.info.short_content || this.info
					.tel) {
					uni.createSelectorQuery().select('#xinxi').boundingClientRect(res => { //最外层盒子的节点：类或者id
						xinxi = res.top + res.height-44;
					}).exec()
				}
				if (this.info.teacher_list.length > 0) {
					uni.createSelectorQuery().select('#shizi').boundingClientRect(res => { //最外层盒子的节点：类或者id
						shizi = res.top + res.height-44;
					}).exec()
				}
				if (this.info.activities.length > 0) {
					uni.createSelectorQuery().select('#xiaoyuan').boundingClientRect(res => { //最外层盒子的节点：类或者id
						xiaoyuan = res.top + res.height-44;
					}).exec()
				}
				if (this.info.activities.length > 0) {
					uni.createSelectorQuery().select('#shipu').boundingClientRect(res => { //最外层盒子的节点：类或者id
						shipu = res.top + res.height;
						console.log(kecheng, xinxi, shizi, xiaoyuan, shipu)
						if (kecheng > 0) {
							this.navIndex = 0;
						} else if (kecheng < 0 && xinxi > 0) {
							this.navIndex = 1;
						} else if (xinxi < 0 && shizi > 0) {
							this.navIndex = 2;
						} else if (shizi < 0 && xiaoyuan > 0) {
							this.navIndex = 3;
						} else if (xiaoyuan < 0 && shipu > 0) {
							this.navIndex = 4;
						}
					}).exec()
				}
			}, 500);
		},
		methods: {
			init() {
				uni.getStorage({
					key: 'user_info',
					success: (res) => {
						this.token = res.data.token;
						if (this.token) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									let longitude = res.longitude;
									let latitude = res.latitude;
									uni.request({
										url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/uploadLocation',
										data: {
											"token": this.token,
											"longitude": longitude,
											"latitude": latitude
										},
										method: 'GET',
										success: res => {
											console.log(res);
										},
										fail: (res) => {
											console.log(res)
											this.wxLogin();
										},
									});
								},
								fail: () => {
									this.wxLogin();
								}
							});
						} else {
							this.wxLogin();
						}
					},
					fail: () => {
						this.wxLogin();
					}
				});
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log(loginRes)
						this.code = loginRes.code;
						this.$request('/api/wxapp/index/wxLogin', {
							'code': loginRes.code
						}).then(wxLoginRes => {
							if (wxLoginRes.code === 1) {
								this.isReg = wxLoginRes.data.is_reg;
								this.session_key = wxLoginRes.data.session_key;
								this.openid = wxLoginRes.data.openid;
								uni.setStorageSync('openid', this.openid);
								if (this.isReg) {
									this.auth();
								} else {
									uni.redirectTo({
										url: '../login/auth?redirect=../stage/class'
									});
								}
							}
						})
					}
				});
			},
			auth() {
				let param = {
					'openid': this.openid
				}
				this.$request('/api/wxapp/index/accountLogin', param)
					.then(res => {
						let userinfo = res.data.userinfo;
						console.log(userinfo)
						uni.setStorage({
							key: 'user_info',
							data: userinfo,
							success: () => {
								console.log('success');
								this.token = userinfo.token;
								this.getShopInfo();
							}
						});
						if (res.data.usernum > 1) {
							uni.navigateTo({
								url: '../login/user_select'
							});
						}
					})
			},
			preview(arr,index){
				let imgArr = [];
				for(let i=0;i<arr.length;i++){
					if(arr[i].type==='image'){
						imgArr.push(arr[i].url)
					}
				}
				uni.previewImage({
					current: index,
					urls: imgArr,
					loop: true,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			bindToView(obj, index) {
				this.navIndex = index;
				let id;
				if (obj === '课程') {
					id = "#kecheng";
				} else if (obj === '信息') {
					id = "#xinxi";
				} else if (obj === '师资') {
					id = "#shizi";
				} else if (obj === '校园') {
					id = "#xiaoyuan";
				} else if (obj === '食谱') {
					id = "#shipu";
				}
				uni.createSelectorQuery().select(id).boundingClientRect(data => { //目标位置的节点：类或者id
					uni.createSelectorQuery().select(".container").boundingClientRect(res => { //最外层盒子的节点：类或者id
						uni.pageScrollTo({
							duration: 500, //过渡时间
							scrollTop: data.top - res.top - 44, //到达距离顶部的top值
						})
					}).exec()
				}).exec();
			},
			change(e) {
				this.current = e.detail.current;
			},
			detail(type) {
				if (type === 1) {
					this.detailInfo = this.info.address_detail;
				} else {
					this.detailInfo = this.info.content;
				}
				this.$refs.popup.open();
			},
			getShopInfo() {
				console.log('hadle')
				this.$request('/api/wxapp/v2/goods/index/detail', {
					"token": this.token,
					"shop_id": this.pid
				}).then(res => {
					console.log(res)
					uni.hideLoading();
					if (res.code === 1) {
						this.info = res.data;
						this.swiperInfo = this.info.images;
						if (this.info.cate.length > 0) {
							this.navBar.push('课程')
						}
						if (this.info.address_detail || this.info.name || this.info.short_content || this.info
							.tel) {
							this.navBar.push('信息')
						}
						if (this.info.teacher_list.length > 0) {
							this.navBar.push('师资')
						}
						if (this.info.activities.length > 0) {
							this.navBar.push('校园')
						}
						if (this.info.activities.length > 0) {
							this.navBar.push('食谱')
						}
					}else if (res.code === 403||res.code === 401) {
							uni.redirectTo({
								url: '../login/auth?redirect="../stage/class"'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
				})
			}
		},
		filters: {
			fomatTime
		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		padding-top: 88rpx;
	}

	.navBar {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #FFFFFF;

		.item {
			text-align: center;
			position: relative;
		}
	}

	swiper {
		height: 480rpx;
	}

	.swiper-item {
		width: 100%;
		height: 100%;
		background-color: #808080;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		font-size: 20px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 700;
		color: #333333;
		line-height: 20px;

		text {
			font-size: 13px;
			color: #999999;
		}
	}

	.content {
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.18);
		border-radius: 10px 10px 1px 1px;
		padding: 30rpx 20rpx;
		position: absolute;
		left: 0;
		top: 424rpx;
		box-sizing: border-box;
	}
	#shizi{
		margin-top: 40rpx;
	}
	.selectContainer {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-bottom: 60rpx;

		.item {
			width: 210rpx;
			height: 154rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 10px 0px #E9EBF6;
			border-radius: 4px;
			margin-top: 40rpx;
			margin-right: 40rpx;

			image {
				display: block;
				width: 64rpx;
				height: 64rpx;
				margin: 20rpx auto;
			}

			.text {
				font-size: 15px;
				color: #333333;
				text-align: center;
			}
		}

		.item:nth-child(3),
		.item:nth-child(6),
		.item:nth-child(9) {
			margin-right: 0;
		}
	}

	.infoContainer {
		margin-top: 40rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 4px;
		padding: 20rpx;
		box-sizing: border-box;
		.cell {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			height: 74rpx;

			.name {
				font-size: 15px;
				color: #333333;
				font-weight: 700;
				position: relative;
			}
			.name::before{
				display: block;
				content: "";
				width: 28rpx;
				height: 28rpx;
				border-radius: 14rpx;
				background-color: #7ED3CA;
				opacity: 0.37;
				position: absolute;
				top: -6rpx;
				left: -4rpx;
			}
			.intro {
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 10px;
				color: #999999;
				font-size: 13px;
			}

			.icon {
				width: 5px;
				height: 8px;
			}
		}
	}

	.shiziTitle {
		font-size: 15px;
		font-weight: 700;
		color: #333333;
		height: 74rpx;
		line-height: 74rpx;
	}

	.teacherContainer {
		margin-top: 9px;
	}

	.teacherContent {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.teacherIntro {
		width: 62px;
		margin-right: 10px;
		text-align: center;

		image {
			width: 62px;
			height: 62px;
			border-radius: 31px;
		}

		.name {
			font-size: 13px;
			color: #333333;
		}

		.jingyan {
			font-size: 13px;
			color: #999999;
		}
	}

	.service {
		margin-top: 20px;
		font-size: 13px;
		color: #999999;

		text {
			font-size: 15px;
			font-weight: 700;
			color: #333333;
		}
	}

	.detailInfoContent {
		background-color: #FFFFFF;
		color: #333333;
		width: 750rpx;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 8px 8px 0 0;
	}

	.head_bar {
		height: 140rpx;

		.icon {
			image {
				width: 5px;
				height: 8px;
			}
		}

		.name {
			font-size: 19px;
			font-weight: 700;
			color: #333333;
		}
	}

	.cardContainer {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8rpx;
		margin: 0 auto 10px auto;

		.avatar {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			margin-right: 10px;
		}

		.cardHead {
			padding: 10px;
			box-sizing: border-box;

			.name {
				font-size: 15px;
				color: #333333;
			}

			.time {
				font-size: 15px;
				color: #8B8B8B;
			}
		}

		.cover image {
			display: block;
			width: 100%;
			height: 320rpx;
		}

		.imgs image,
		.imgs video {
			width: 210rpx;
			height: 210rpx;
			margin-left: 20rpx;
		}

		.intro {
			width: 630rpx;
			margin: 0 auto;
			font-size: 15px;
			color: #8B8B8B;
			line-height: 48rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			padding-bottom: 20rpx;
			padding-top: 18rpx;
		}
	}

	.more {
		width: 206rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		background: #F6F6F6;
		border-radius: 36rpx;
		font-size: 15px;
		color: #999999;
		margin: 40rpx auto 0 auto;
	}

	.active::after {
		content: '';
		display: block;
		width: 28px;
		height: 2px;
		background: #55DDB1;
		border-radius: 1px;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>
